.box1 {
  //后代选择器
  .box2 {
    color: red;
  }

  // 子元素选择器
  >.box3 {
    color: red;

    &:hover {
      color: blue;
    }
  }

  //为box1设置一个hover
  //&就表示外层的元素
  &:hover {
    color: orange;

  }
}

.p1{
  width: 100px;
  height: 200px;
}

// :extend() 对当前选择器扩展指令选择器的样式 (选择器分组)
.p2:extend(.p1){
  color: red;
}

.p3 {
  //直接对前面指定的样式进行引用,这里就相当于将p1的样式在这里进行了 
  //mixin 混合
  .p1();
}

//使用类选择器时可以在选择器后边添加一个括号,这时我们实际上就创建了一个mixins(混合函数)
//这一组样式专门用来给别人用的
.p4() {
  width: 100px;
  height: 100px;
  background-color: #bfa;
}

.p5 {
  .p4();
}

//混合函数 在混合函数中科院直接设置变量,也可以指定默认值,就是不传值时
.test(@w:20px, @h:60px, @bg-color:red) {
  width: @w;
  height: @h;
  border: 1px solid @bg-color;
}

div {
  // 调用混合函数,按顺序传递参数
  .test(100px, 200px, #bfa);
}

span {
  color: average(red, yellow);
}